VitePress

Tags

VitePress

VueJS

Words count

115 字

Reading time

1 分钟

添加图片放大功能「medium-zoom」

安装「medium-zoom」

pnpm add medium-zoom

添加内容到 .vitepress/theme/index.ts

import { onMounted, watch, nextTick } from 'vue';
import { useRoute } from 'vitepress';
import mediumZoom from 'medium-zoom';

import './index.css'; // 此处引用同下方创建的 css 文件

export default {
  setup() {
    const route = useRoute();
    const initZoom = () => {
      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); 
      // mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
    };
    onMounted(() => {
      initZoom();
    });
    watch(
      () => route.path,
      () => nextTick(() => initZoom())
    );
  },
};

添加内容到 .vitepress/theme/index.css

.medium-zoom-overlay {
  z-index: 30;
}

.medium-zoom-image--opened {
  z-index: 31;
}